<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { tools } from "@/assets/js/tools.js";

const router = useRouter();
const toolMenu = ref([]);

onMounted(() => {
  toolMenu.value = tools; // 工具列表展示前10条数据
})

// 工具列表点击事件 
const toolClick = (item) => {
  router.push({ name: item.name });
};

</script>

<template>
  <main>
    首页
  </main>
</template>

<style lang="scss" scoped>
.box {
  max-width: 70%;
  margin: 10px auto 20px;
  padding: 10px;

  &-tit {
    margin-bottom: 10px;

    span {
      font-size: 22px;
      color: hsl(333deg 100% 45%);
    }
  }

  &-tags {
    display: flex;

    .tag {
      border-radius: 5px;
      font-size: 15px;
      margin-right: 5px;
    }
  }

  &-content {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 5px;

    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid hsl(205, 100%, 75%);
      line-height: 35px;
      cursor: pointer;

      &:hover {
        background-color: hsl(205, 100%, 75%);
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .box {
    max-width: 100%;

    &-content {
      margin-top: 10px;
      display: grid;
      grid-template-columns: 1fr;
    }
  }
}
</style>
